<template>
<div class="container">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="mini">
        <el-form-item label="状态:" class="selector-mini">
            <el-select v-model="searchForm.completeType" placeholder="" >
                <el-option
                    label="全部"
                    value=" ">
                </el-option>
                <el-option
                    label="未完成"
                    value="0">
                </el-option>
                 <el-option
                    label="已完成"
                    value="1">
                </el-option>
            </el-select>
        </el-form-item>
         <el-form-item label="缴费时间:">
            <div class="block">
                <el-date-picker v-model="conditionTime" type="daterange" format="yyyy - MM - dd " value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="applySubmit(1)">查询</el-button>
            <el-button type="primary" @click="conditionTime=[],searchForm.completeType = ' ',searchForm.startTime='',searchForm.endTime=''">重置</el-button>
        </el-form-item>
        <el-button size="mini" type="primary" @click="download">导出</el-button>
    </el-form>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="保证金ID"
                width="50">
        </el-table-column>
                <el-table-column
                prop="applicant"
                label="姓名"
                width="80">
        </el-table-column>
           <el-table-column
                prop="orderId"
                label="订单号"
                width="180">
        </el-table-column>
                <el-table-column
                prop="mobile"
                label="联系电话"
                width="120">
        </el-table-column>
          <el-table-column
                prop="packageMoney"
                label="缴费金额"
                width="80">
        </el-table-column>

        <el-table-column
                prop="packageName"
                label="礼包套餐名称">
        </el-table-column>
                 <el-table-column
                prop="totalSaleAmount"
                label="完成情况"
                width="80">
        </el-table-column>
                 <el-table-column
                prop="completeType"
                label="状态"
                width="180">
        </el-table-column>

        <el-table-column
                prop="payDate"
                label="缴费时间">
        </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentChange"
            :current-page.sync="pageIndex">
    </el-pagination>
    <!-- 分页 -->
</div>
</template>
<style scoped>
    .container{
        padding: 20px 10px;
    }

</style>
<script>
    export default {
        name:'deposit',
        data(){
            return{
                key:'',
                searchForm:{
                    startTime:'',
                    entTime:'',
                    completeType:'0'
                },
                conditionTime:[],
                pageSize:10,
                pageIndex:1,
                total:0,
                tableData:[],
            }
        },
        mounted(){
            this.applySubmit()
        },
        methods:{
            applySubmit(type){
                if(this.conditionTime && this.conditionTime.length >0){
                    this.searchForm.startTime = this.conditionTime[0]
                    this.searchForm.endTime = this.conditionTime[1]
                }else{
                    this.searchForm.startTime = ''
                    this.searchForm.endTime = ''
                }
                this.pageIndex = type ==1?1:this.pageIndex
                this.request({
                    url: '/sp/store/partner/sysuser/deposit/query?completeType='+ this.searchForm.completeType +'&pageIndex='+ this.pageIndex + '&pageSize=' + this.pageSize + '&startTime='+this.searchForm.startTime+'&endTime='+this.searchForm.endTime,
                    method: 'get',
                }).then(res =>{
                    this.tableData = res.data.list
                    this.total = res.data.totalCount
                })
            },
            currentChange(val){

                this.pageIndex = val
                this.applySubmit()
            },
            download(){
                let newElement = document.createElement('a')
                let nodeText = document.createTextNode('link')
                newElement.appendChild(nodeText)
                newElement.setAttribute('href', process.env.STORE_BASE_API + '/sp/store/partner/sysuser/deposit/download?pageIndex='+ this.pageIndex + '&pageSize=' + this.pageSize + '&keyWord='+this.searchForm.key+'&startTime='+this.searchForm.startTime+'&endTime='+this.searchForm.endTime)
                newElement.click()
            }
        }
    }
</script>

